<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}




        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title">User List </h3>
            </div>
            <div class="card-body">
                <div>
                    用户名：<input v-model="user.username" />
                    手机号：<input v-model="user.mobile" />
                    密码：<input v-model="user.newPassword" />
                    <button @click="submit(user)">提交</button>
                </div>
                <div>

                    关键词：<input placeholder="名称" v-model="selector.keyword">
                    <button onclick="loadData()">Search</button>
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <td>#</td>
                        <td>用户名</td>
                        <td>手机</td>
                        <td>邮箱</td>
                        <td>密码</td>

                        <td> -</td>
                    </tr>
                    <template v-for="(user,index) in list">
                        <tr>
                            <td>{{index+1}}</td>
                            <td>{{user.username}}</td>
                            <td>{{user.mobile}}</td>
                            <td>{{user.email}}</td>
                            <td><input v-model="user.newPassword" /> </td>
                            <td><button @click="submit(user)">保存</button></td>

                        </tr>
                    </template>
                </table>

            </div>

            <div style="position:fixed;right:10px;bottom:10px;">
                <a class="btn btn-default" @click="newEntity()">新增纸张</a>
            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">
    <script>

const { createApp } = Vue;
    var app = createApp({
    data() {
      return { 
        list:[], total:0 , user:{},
        currentIndex : -1,
        selector:{target:{},pageSize:20}
      }
    },methods:{
        submit:function (issue){
            var url = "/sys/user/update";
            axios.post(url, issue).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },newEntity:function(){
            var issue = {username:"新建用户"};
            this.list.push(issue)
            this.submit(issue)
        },loadData:function(){
            var selector = this.selector || {}
            axios.post('/sys/user/list', selector).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        }
     },
    watch:{
        selector:{
            handler:function(nv,ov){
                loadData()
            },deep:true
        }
    }
  }).mount('#app');


function loadData( ){
    app.loadData();
}

window.onload=function(){
   loadData( );
}











    </script>
</th:block>
</body>
</html>